/* 考试查询(考试统计部分) */
<template>
    <div>
        <div style="height: 30px;">
            <el-breadcrumb style="float: left;" separator="/">
                <el-breadcrumb-item :to="{ path: '/examInquiry' }">
                    <span @click="reback">{{ $t('examinInquiry.examinInquiry') }}</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ $t('examinInquiry.examinationStatistics') }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <condition-card @reset="resetSearch" @search="onSearch" label-position="right" label-width="170px">
            <!-- 第一行 -->
            <el-row :gutter="24" style="height: 50px;">
                <!-- 学期学年 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.semesterYear')">
                        <CalendarSelect v-model="queryForm.condition.calendarId" @load-done="loadDone" @input='changeInput'></CalendarSelect>
                    </el-form-item>
                </el-col>
                <!-- 学号 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.studentNumber')">
                        <el-input v-model.trim="queryForm.condition.studentId" :placeholder="$t('examinInquiry.pleaseEnter')" clearable style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
                <!-- 姓名 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.fullName')">
                        <el-input v-model.trim="queryForm.condition.studentName" :placeholder="$t('examinInquiry.pleaseEnter')" clearable style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row :gutter="24" style="height: 50px;">
                <!-- 培养层次 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.cultivationLevel')">
                        <el-select v-model="queryForm.condition.trainingLevel" clearable filterable  style="width:100%">
                            <el-option
                                v-for="item in options.trainingLevel"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 培养类别 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.trainingCategory')">
                        <el-select v-model="queryForm.condition.trainingCategory" clearable filterable  style="width:100%">
                            <el-option
                                v-for="item in options.trainingCategory"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 学位类型 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.degreeType')" >
                        <el-select v-model="queryForm.condition.degreeType" clearable filterable  style="width:100%">
                            <el-option
                                v-for="item in options.degreeType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row :gutter="24" style="height: 50px;">
                <!-- 学习形式 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.learningForm')">
                        <el-select v-model="queryForm.condition.formLearning" clearable filterable  style="width:100%">
                            <el-option
                                v-for="item in options.formLearning"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 学院 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.college')" >
                        <el-select v-model="queryForm.condition.college"  @change="collegeChange"  clearable filterable  style="width:100%">
                            <el-option
                                v-for="item in options.college"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 专业 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.major')">
                        <el-select v-model="queryForm.condition.major" clearable filterable  style="width:100%">
                            <el-option
                                v-for="item in options.major"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 第四行 -->
            <el-row :gutter="24" style="height: 50px;">
                <!-- 年级 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.grade')" >
                        <el-date-picker
                            style="width: 100%"
                            v-model="queryForm.condition.grade"
                            value-format="yyyy"
                            type="year"
                            :clearable="false"
                            placeholder="选择年">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <!-- 考试名称 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.nameExamination')" >
                        <el-input v-model.trim="queryForm.condition.examName" :placeholder="$t('examinInquiry.pleaseEnter')" clearable style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
                <!-- 考试次序 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.examinationOrder')" >
                        <el-input v-model.number="queryForm.condition.timesOfExam" :maxlength="6" onkeyup="value=value.replace(/[^\d]/g,'')"  @change="enterNumber" :placeholder="$t('examinInquiry.enterTheNumber')" clearable style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 第五行 -->
            <el-row :gutter="24" style="height: 50px;">
                <!-- 试题代码 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.testQuestionCode')" >
                        <el-input v-model.trim="queryForm.condition.questionCode" :placeholder="$t('examinInquiry.pleaseEnter')" clearable style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
                <!-- 考试时间 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.examinationTime')" >
                        <el-date-picker
                            v-model="queryForm.condition.examinationTime"
                            style="width: 100%"
                            type="datetimerange"
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            start-placeholder="选择开始时间"
                            end-placeholder="选择结束时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <!-- 是否通过 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinInquiry.passOrNot')" >
                        <el-select v-model="queryForm.condition.pass" clearable filterable  style="width:100%">
                            <el-option
                                v-for="item in options.pass"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>

        <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
            <h1 class="condition-title">{{$t('examinInquiry.examinationStatistics')}}</h1>
            <el-row style="padding-bottom: 10px;" class="row-bg" justify="space-between">
                <el-button type="primary" style="float:right; margin-left:10px;" @click="export1">{{$t('examinInquiry.export')}}</el-button>
            </el-row>
            <edu-table :pagination="false" :selection='false' :order="false" :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
                 <!-- 学期 -->
                <edu-table-column :label="$t('examinInquiry.semester')" prop="calendarName">
                    <!-- <template slot-scope="scope">
                        <div>
                            {{ calendarNameFun(scope.row.calendarName) }}
                        </div>
                    </template> -->
                </edu-table-column>
                <edu-table-column :label="$t('examinInquiry.studentNumber')" prop="studentId"></edu-table-column> <!-- 学号 -->
                <edu-table-column :label="$t('examinInquiry.fullName')" prop="studentName"></edu-table-column> <!-- 姓名 -->
                <edu-table-column :label="$t('examinInquiry.cultivationLevel')" prop="trainingLevelName"></edu-table-column> <!-- 培养层次 -->
                <edu-table-column :label="$t('examinInquiry.trainingCategory')" prop="trainingCategoryName"></edu-table-column> <!-- 培养类别 -->
                <edu-table-column :label="$t('examinInquiry.degreeType')" prop="degreeTypeName"></edu-table-column> <!-- 学位类型 -->
                <edu-table-column :label="$t('examinInquiry.learningForm')" prop="formLearningName"></edu-table-column>  <!-- 学习形式 -->
                <edu-table-column :label="$t('examinInquiry.college')" prop="collegeName"></edu-table-column> <!-- 学院 -->
                <edu-table-column :label="$t('examinInquiry.major')" prop="majorName"></edu-table-column> <!-- 专业 -->
                <edu-table-column :label="$t('examinInquiry.grade')" prop="grade"></edu-table-column> <!-- 年级 -->
                <edu-table-column :label="$t('examinInquiry.nameExamination')" prop="examName"></edu-table-column>  <!-- 考试名称 -->
                <edu-table-column :label="$t('examinInquiry.examinationOrder')" prop="timesOfExam"></edu-table-column> <!-- 考试次序 -->
                <edu-table-column :label="$t('examinInquiry.testQuestionCode')" prop="questionCode"></edu-table-column> <!-- 试题代码 -->
                <edu-table-column :label="$t('examinInquiry.titleOfQuestion')" prop="questionName"></edu-table-column> <!-- 试题名称 -->
                <edu-table-column :label="$t('examinInquiry.answerResults')" min-width="120" prop="answerCorrect"></edu-table-column> <!-- 答题是否正确 -->
                <edu-table-column :label="$t('examinInquiry.studentAnswers')" prop="answer"></edu-table-column> <!-- 学生答案 -->
                <edu-table-column :label="$t('examinInquiry.examinationTime')" min-width="140" prop="examTime"></edu-table-column> <!-- 考试开始结束时间 -->
                <!-- 是否通过 -->
                <edu-table-column :label="$t('examinInquiry.passOrNot')" prop="pass" min-width="120" align="center">
                    <template slot-scope="scope">
                        <el-tag
                            v-if="scope.row.pass === '通过'"
                            type="success"
                            plain>
                            {{ scope.row.pass }}
                        </el-tag>
                        <el-tag
                            v-else-if="scope.row.pass === '未通过'"
                            type="danger"
                            plain>
                            {{ scope.row.pass }}
                        </el-tag>
                    </template>
                </edu-table-column> 
            </edu-table>
            <el-row type="flex" class="row-bg" justify="end">
                <el-col>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="queryForm.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryForm.total_"
                        style="float:right;margin-top:10px"></el-pagination>
                </el-col>
            </el-row>
        </el-card>
        <edu-export-dialog
            ref="downloadRef"
            :disabled="exportButton"
            :title="$t('message.prompt')"
            :data="exportResult"
        >
        </edu-export-dialog>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import myExaminationsApi from 'common/src/api/academicBehaviorNorms/myExaminations/myExaminations';
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent';
import dayjs from 'dayjs'
export default {
    props: {
        compile: {
            type : String,
            default: ''
        }
    },
    data() {
        return {
            queryForm: {
                pageNum_: 1,
                pageSize_: 10,
                total_: 0,
                condition: {
                    calendarId: '', // 学期学年
                    studentId: '', // 学号
                    studentName: '', // 姓名
                    trainingLevel: '', // 培养层次
                    trainingCategory: '', // 培养类别
                    degreeType: '', // 学位类型
                    formLearning: '', // 学习形式
                    college: '', // 学院
                    major: '', // 专业
                    grade: '', // 年级
                    examName: '', // 考试名称
                    timesOfExam: '', // 考试次序
                    questionCode: '', // 试题代码
                    examinationTime: [dayjs().subtract(1,'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')], // 考试时间
                    pass: '', // 是否通过 
                    student: '',
                    startTime: '',
                    endTime: ''
                }
            },
            options: {
                calendarId: [], // 学期学年
                trainingLevel: [], // 培养层次
                trainingCategory: [], // 培养类别
                degreeType: [], // 学位类型
                formLearning: [], // 学习形式
                college: [], // 学院
                major: [], // 专业
                grade: [], // 年级
                // 是否通过
                pass: [
                    { value: 1 , label: '通过' },
                    { value: 2 , label: '未通过' }
                ] 
            },
            dataList: [],
            exportButton: false,
            exportResult: null,
            multipleSelection: [],
            records: [],
            condition: {}
        }
    },
    computed: {
        params() {
           let obj = JSON.parse(JSON.stringify(this.queryForm))
           obj.condition['examinationTime'] = this.queryForm.condition.examinationTime ? this.queryForm.condition.examinationTime : ""
           obj.condition['startTime'] = (this.queryForm.condition.examinationTime && this.queryForm.condition.examinationTime[0]) ? this.queryForm.condition.examinationTime[0] : ""
           obj.condition['endTime'] = (this.queryForm.condition.examinationTime && this.queryForm.condition.examinationTime[1]) ? this.queryForm.condition.examinationTime[1] : ""
           return obj
        }
    },
    created() {
        this.queryForm.condition.grade = this.$moment(new Date().getTime()).format('YYYY')

    },
    mounted() {
        this.getOptions()
        this.queryForm.condition.calendarId = ''
        // this.queryForm.condition.calendarId = 110
        this.getStatisticsApi(this.queryForm)
    },
    filters: {
        pass (val) {
            switch (val) {
                case 1:
                    return '通过'
                case 2:
                    return '未通过'
                default:
                    return ''
            }
        }
    },
    methods: {
        calendarNameFun(val) {
            let array = val.split(" ")
            return `${array[0]}学年第${array[1]}学期`
        },
        // 查询接口
        getStatisticsApi(data) {
            myExaminationsApi.statisticQuery(this.params).then(res => {
                this.dataList = res.data.list
                this.queryForm.total_ = res.data.total_
                this.multipleSelection = []
            })
        },
        reback() {
            this.$emit('change-exam')
        },
        // 重置
        resetSearch() {
            for (let k in this.queryForm.condition) {
                if (this.queryForm.condition.hasOwnProperty(k)) {
                    if (k === 'calendarId') {
                        this.queryForm.condition[k] = 110
                    } else {
                        this.queryForm.condition[k] = ''
                    }
                }
            }
            this.options.major = []
            this.queryForm.pageNum_ = 1
            this.queryForm.condition.grade = this.$moment(new Date().getTime()).format('YYYY')
            this.getStatisticsApi(this.queryForm)
        },
        // 筛选
        onSearch() {
            this.queryForm.pageNum_ = 1
            this.getStatisticsApi(this.queryForm)
        },
        // 导出
        export1() {
            let _this = this
            let parm = {
                calendarId: _this.queryForm.condition.calendarId,
                studentId: _this.queryForm.condition.studentId,
                studentName: _this.queryForm.condition.studentName,
                college: _this.queryForm.condition.college,
                major: _this.queryForm.condition.major,
                trainingLevel: _this.queryForm.condition.trainingLevel,
                trainingCategory: _this.queryForm.condition.trainingCategory,
                degreeType: _this.queryForm.condition.degreeType,
                formLearning: _this.queryForm.condition.formLearning,
                grade: _this.queryForm.condition.grade,
                examName: _this.queryForm.condition.examName,
                timesOfExam: _this.queryForm.condition.timesOfExam,
                questionCode: _this.queryForm.condition.questionCode,
                examinationTime: _this.queryForm.condition.examinationTime,
                startTime: _this.queryForm.condition.examinationTime[0] || '',
                endTime: _this.queryForm.condition.examinationTime[1] || '',
                pass: _this.queryForm.condition.pass
            }
            if (_this.dataList.length === 0) {
                _this.$message.error(this.$t('examinInquiry.noData'))
                return 
            } else {
                myExaminationsApi.statisticExport(parm).then(res => {
                    _this.$message({
                        message: _this.$t('base.exportSuccess'),
                        type: 'success'
                    })
                })
            }
        },
        // 分页
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.queryForm.pageNum_ = 1
            this.getStatisticsApi(this.queryForm)
        },
        // 分页
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.getStatisticsApi(this.queryForm)
        },
        // 勾选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 筛选条件字典查询
        getOptions() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ['X_PYCC', 'X_PYLB', 'X_XWLX', "X_XXXS", 'X_YX' ]
            };
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        trainingLevel: "X_PYCC", // 培养层次
                        trainingCategory: "X_PYLB", // 培养类别
                        degreeType: "X_XWLX", // 学位类型
                        formLearning: "X_XXXS", // 学习形式
                        college: "X_YX" // 学院
                    },
                    res.data,
                    this.options
                );
            });
        },
        // 学院选择
        // collegeChange(val) {
        //     if (val.length > 0) {
        //         let collegeList = [val];
        //         graduateStudent.getMajorByCollage(collegeList).then(res => {
        //             this.options.major = res.data;
        //         });
        //     } else {
        //         this.options.major = [];
        //     }
        // },
        // 修改学院
        collegeChange(val) {
            this.options.major = []
            this.queryForm.condition.major = ''
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['G_ZY'],
                filter: {
                    prefix: [val],
                    specilaCode: 'XY2ZY',
                    facultys: [val]
                }
            }
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        major: 'G_ZY' // 专业
                    },
                    res.data,
                    this.options
                )
            })
        },
        loadDone(data, val) {
            this.getStatisticsApi(this.queryForm)
        }
    }
}
</script>

<style scoped>

</style>